<template>
   <div>

      <div style="margin-top: 10px">
         <el-button icon="el-icon-plus" size="mini" type="primary" @click="showAndTruckTeamView">新增车队</el-button>
      </div>
   <div style="margin-top: 10px">
      <el-table :data="tts" border stripe width="100%">
         <el-table-column prop="teamid" label="车队编号"></el-table-column>
         <el-table-column prop="teamname" label="车队名称"></el-table-column>
         <el-table-column prop="leader" label="车队负责人"></el-table-column>
         <el-table-column prop="checkintime" label="创建时间"></el-table-column>
         <el-table-column prop="remark" label="备注"></el-table-column>
         <el-table-column label="操作" width="250">
            <template slot-scope="scope">
               <el-button size="mini" style="padding: 2px" @click="showEditTruckTeamView(scope.row)">编辑车队</el-button>
               <el-button size="mini" style="padding: 2px" type="primary" @click="showTruckList(scope.row)">查看车辆列表</el-button>
               <el-button size="mini" style="padding: 2px" type="danger" @click="deleteTruckTeamById(scope.row)">删除车队</el-button>
            </template>
         </el-table-column>
      </el-table>
   </div>

      <el-dialog
              title="车辆列表"
              :visible.sync="dialogVisible"
              width="50%">
         <div>
            <el-table
                    :data="trucksInTruckTeam"
                    border
                    stripe
                    size="mini"
                    style="width: 100%">
               <el-table-column
                       prop="truckid"
                       label="车辆编号">
               </el-table-column>
               <el-table-column
                       prop="number"
                       label="车牌号">
               </el-table-column>
               <el-table-column
                       prop="type"
                       label="车辆类型">
               </el-table-column>
               <el-table-column
                       prop="length"
                       label="车辆长度">
               </el-table-column>
               <el-table-column
                       prop="tonnage"
                       label="吨位">
               </el-table-column>
               <el-table-column
                       label="状态">
                  <template slot-scope="scope">
                     <el-tag v-if="scope.row.state==1">承运中</el-tag>
                     <el-tag type="success" v-if="scope.row.state==2">空闲</el-tag>
                  </template>
               </el-table-column>
            </el-table>
         </div>
         <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>

      <el-dialog
              :title="title"
              :close-on-click-modal="false"
              :visible.sync="addTruckTeamDialog"
              width="30%">
         <div>
            <table>
               <tr>
                  <td>车队名称</td>
                  <td>
                     <el-input v-model="tt.teamname" placeholder="车队名称"></el-input>
                  </td>
               </tr>
               <tr>
                  <td>车队负责人</td>
                  <td>
                     <el-input v-model="tt.leader" placeholder="车队负责人"></el-input>
                  </td>
               </tr>
               <tr>
                  <td>车队车辆</td>
                  <td>
                     <el-select v-model="tt.tids" filterable multiple placeholder="车队车辆">
                        <el-option
                                v-for="item in trucks"
                                :key="item.truckid"
                                :label="item.number+'-'+item.length+'-'+item.tonnage"
                                :value="item.truckid">
                        </el-option>
                     </el-select>
                  </td>
               </tr>
               <tr>
                  <td>备注</td>
                  <td>
                     <el-input v-model="tt.remark" placeholder="备注"></el-input>
                  </td>
               </tr>
            </table>
         </div>
         <span slot="footer" class="dialog-footer">
    <el-button @click="addTruckTeamDialog = false">取 消</el-button>
    <el-button type="primary" @click="doAddTruckTeam">确 定</el-button>
  </span>
      </el-dialog>

  </div>
</template>

<script>
   import {deleteRequest, getRequest} from "../../utils/api";
   import {postRequest} from "../../utils/api";
   import {putRequest} from "../../utils/api";

   export default {
        name: "TruckTeamMana",
      data(){ /*data  用于声明变量*/
           return{
              dialogVisible: false,
              addTruckTeamDialog:false,
              title:'',
              tts:[],  /*后端传输过来的数据*/
              tt: {
                 teamname: '',
                 leader: '',
                 remark: '',
                 tids: []  /*车队id*/
              },
              trucks: [], /*查询的所有车辆*/
              trucksInTruckTeam:[]
           }
      },
      mounted(){  /*方法调用处*/
        this.initTts();
      },
      methods:{ /*方法处理处*/

         deleteTruckTeamById(data){  /*删除车队信息操作*/
            getRequest("/truck/team/" + data.teamid).then(resp=>{
               if(resp && resp.length > 0){ /*如果响应的车队有车辆 不可删除*/
                     this.$message.error("该车队存在有车辆,不可删除,谢谢配合o(*￣▽￣*)ブ")
               }else {
                  /*如果响应的车队没有车辆 可删除*/
                  this.$confirm('此操作将删除该车队, 是否继续?', '提示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     type: 'warning'
                  }).then(() => {
                     deleteRequest("/truck/team/" +data.teamid).then(msg=>{
                        if (msg) {
                           this.initTts();
                        }
                     })
                  }).catch(() => {
                     this.$message({
                        type: 'info',
                        message: '已取消删除'
                     });
                  });

               }

            })

         },


         showEditTruckTeamView(data){  /*修改车队信息*/
            this.title='编辑车队操作菜单';
            this.addTruckTeamDialog = true;
            getRequest("/truck/team/" + data.teamid).then(resp=>{
               if (resp){  /*let 出了循环就没值了*/
                  this.tt.tids = [];
                  for (let i = 0;i<resp.length; i++){

                     /*从 服务器的数据中拿到 车的 id*/
                     this.tt.tids.push(resp[i].truckid);
                  }
               }
            })
            this.tt = data;
            this.iniTrucks();
         },

         doAddTruckTeam(){ /*车队添加*/
            if (this.tt.teamid){
               /*如果存在 车辆id 就是更新操作  否则就是 添加操作*/
               putRequest("/truck/team/",this.tt).then(resp=>{
                  if (resp){
                     this.addTruckTeamDialog = false;
                     this.iniTrucks();
                  }
               })
            }else {
            postRequest("/truck/team/",this.tt).then(resp=>{
               if(resp){
                  this.addTruckTeamDialog = false;
                  this.initTts();
                  this.iniTrucks();
               }
            })
            }

         },

         showAndTruckTeamView(){ /*添加车队*/
            this.title='添加车队操作菜单';
            this. addTruckTeamDialog= true;
            this.iniTrucks(); /*展示数据 并刷新*/
         },

         showTruckList(data){  /*查询车队信息列表*/
            this.dialogVisible= true;
            this.loadTruckByTruckTeamId(data);
            this.iniTrucks();
         },
         loadTruckByTruckTeamId(data){
            getRequest("/truck/team/" + data.teamid).then(resp=>{
               if (resp){
                  this.trucksInTruckTeam = resp; /*有响应 就拿到响应数据*/
               }
            })
         },

         iniTrucks(){ /*所有车辆*/
            getRequest("/truck/team/trucks").then(resp=>{
               if(resp){
                  this.trucks = resp;
               }
            })
         },

         initTts(){ /*查询车队信息*/
            getRequest("/truck/team/").then(resp=>{
               /*如果有响应 就展示拿到的数据*/
               if(resp){
                  this.tts = resp.data;
               }
            })
      }
   }
    }
</script>

<style scoped>

</style>